<template>
  <div ref="chart1" id="chart1"></div>
</template>

<script>
export default {
  name: "EchartsBar",
  data() {
    return {
      da: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      educationals: [],
      companys: [],
      salarys: [],
    };
  },
  computed: {},
  mounted() {
      this.design_bar()
  },
  methods: {
    design_bar(){
            this.axios.get('/api/design/bar').then((res)=>{
            // 判断返回信息状态
            if(res.data.code==200){
                this.educationals = res.data.educationals
                this.companys = res.data.companys
                this.salarys = res.data.salarys
                this.bar()
            }
        }) 
        },
    bar(){
            // 基于准备好的dom，初始化echarts实例
    var myChart = this.$echarts.init(this.$refs["chart1"]);

    // 指定图表的配置项和数据
    // var option = {
    //   title: {
    //     text: "ECharts 入门示例"
    //   },
    //   tooltip: {},
    //   legend: {
    //     data: ["销量"]
    //   },
    //   xAxis: {
    //     data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    //   },
    //   yAxis: {},
    //   series: [
    //     {
    //       name: "销量",
    //       type: "bar",
    //       data: [5, 20, 36, 10, 10, 20]
    //     }
    //   ]
    // };

    const labelOption = {
      show: true,
      position: "insideBottom",
      distance: 19,
      align: "left",
      verticalAlign: "middle",
      rotate: 90,
      formatter: "{c}  {name|{a}}",
      fontSize: 16,
      rich: {
        name: {},
      },
    };
    var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        data: ["生产量", "销量", "库存量"],
      },
      toolbox: {
        show: true,
        orient: "vertical",
        left: "right",
        top: "center",
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar", "stack"] },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      xAxis: [
        {
          type: "category",
          axisTick: { show: false },
          data: this.educationals,
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        // {
        //   name: "学历",
        //   type: "bar",
        //   barGap: 0,
        //   label: labelOption,
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [320, 332],
        // },
        {
          name: "",
          type: "bar",
          label: labelOption,
          emphasis: {
            focus: "series",
          },
          data: this.companys,
        },
        // {
        //   name: "平均工资",
        //   type: "bar",
        //   label: labelOption,
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: this.salarys,
        // },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    },
    options() {},
  },
};
</script>

<style scoped>
#chart1 {
  width: 50%;
  height: 400px;
}
</style>
